<template>
    <div id="expertMessage">
        <div class="card">
            <ul>
                <li>编号：{{expert.id}}</li>
                <li>姓名：{{expert.name}}</li>
                <li>专长：{{expert.specialty}}</li>
                <li>单位：{{expert.company}}</li>
            </ul>
        </div>
        <div class="message">
            <ul>
                <li><span>姓名:  </span><el-input readonly v-model="expert.name" :placeholder="expert.name"></el-input></li>
                <li><span>性别:  </span><el-input readonly v-model="expert.sex" :placeholder="expert.sex"></el-input></li>
                <li><span>手机号:  </span><el-input readonly v-model="expert.phone" :placeholder="expert.phone"></el-input></li>
                <li><span>单位地址:  </span><el-input readonly v-model="expert.company" :placeholder="expert.company"></el-input></li>
				<li><span>专长:  </span><el-input readonly v-model="expert.specialty" :placeholder="expert.specialty"></el-input></li>
				<li><span>号码牌:  </span><el-input readonly v-model="expert.numbercard" :placeholder="expert.numbercard"></el-input></li>
               
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dat:[],
                expert: {
                    id:'',
                    name: '',
                    sex:'',
                    phone: '',
                    company: '',
                    specialty: '',
                    numbercard:''
                }
            };
        },
		mounted() {
			let that = this;
			// (this.id = this.$route.query.id),
			 this.id =localStorage.getItem('id');
				this.$axios
					.post('http://localhost:8080/Administration', this.$qs.stringify({ expertid: this.id }))
					.then(function(response) {
						that.expert.id = response.data.expertname;
						that.expert.name = response.data.expertname;
						that.expert.sex = response.data.sex;
						that.expert.phone = response.data.phone;
						that.expert.company = response.data.company;
						that.expert.specialty = response.data.specialty;
						that.expert.numbercard = response.data.numbercard;
					})
					.catch(function(error) {
						console.log(error);
					});
		},
        created() {


        },
        methods: {


        }
    }
</script>

<style scoped>
    #expertMessage {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
    #expertMessage  .card {
        flex: 1;
        background-image: url(../../assets/images/card.png);
        background-repeat: no-repeat;
        background-size: contain;
        padding-top: 150px;
        padding-left: 100px;
        text-align: left;
        font-size: 15px;
        text-shadow: 0 0 5px #ffffff, 0 0 5px #c5e2b1;
        margin-bottom: 10px;
    }
    .card{
        margin: 0 auto;
    }
    #expertMessage .message {
        width:60%;
    }
    #expertMessage .message ul li {
        line-height: 50px;
        padding-left: 50px;
        text-align: left;
    }
    #expertMessage .message ul li span {
        font-weight: bold;
        color: #000;
        width: 100px;
    }
    textarea{
        width: 330px;
        height: 100px;
        resize:none;
    }
    .message el-input{
        width: 60px;
    }
</style>
